<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>discover</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/discover.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./js/dis.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</head>
<script>

</script>

<body>
    <div class="main pd12">
        <div class="top flex_x between pd12">
            <div class="t_left">
                <img src="./static/image/Snipaste_2023-11-28_15-57-24.png" alt="">
            </div>
            <div class="t_right">
                <a href="./search.html">
                    <img class="mr_20" src="./static/image/Component 22.svg" alt="">
                </a>
                <img src="./static/image/Snipaste_2023-11-28_15-57-24.png" alt="">
            </div>
        </div>
        <div class="wrapper pd12">
            <div class="contain">
                <img src="./static/image/Rectangle 28.png" alt="">
                <img src="./static/image/Rectangle 36 (1).png" alt="">
                <img src="./static/image/Rectangle 36.png" alt="">
            </div>
            <div class="btn">
                <span class="actives"></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- 我的侧边栏内容框 -->
        <div class="mine pos_a txt_center">
            <img class="bgs" src="./static/image/5.png" alt="">
            <img src="./static/image/2.png" class="margin0 mt_20" alt="">
            <div>Harper</div>
            <div class="sl_content flex_y between">
                <div class="sl_item">News</div>
                <div class="sl_item">Set up</div>
                <div class="sl_item">Feedback</div>
                <div class="sl_item">About us</div>
            </div>
            <div class="sign_out txt_center">Sign Out</div>
        </div>
        <a href="./Recommended.html">
            <div class="rec flex_x start mt_20 algin_center">
                <span class="mr_20">Recommended list</span>
                <img src="./static/image/Vector 1.svg" alt="">
            </div>
        </a>
        <div class="r_content flex_x between">
            <div class="r_item flex_y start ">
                <img src="./static/image/Rectangle 29.png" alt="">
                <span class="mt_16">Pop Music in 2023</span>
            </div>
            <div class="r_item flex_y start ">
                <img src="./static/image/Rectangle 30.png" alt="">
                <span class="mt_16">Sounds of nature </span>
            </div>
            <div class="r_item flex_y start ">
                <img src="./static/image/Rectangle 31.png" alt="">
                <span class="mt_16">Piano Music</span>
            </div>
        </div>
       <a href="./Artists.html">
        <div class="rec flex_x start mt_20 algin_center">
            <span class="mr_20">Artists</span>
            <img src="./static/image/Vector 1.svg" alt="">
        </div>
       </a>
        <div class="r_content flex_x between">
            <div class="r_item flex_y start mt_16">
                <img class="border50" src="./static/image/Ellipse 14.png" alt="">
                <span class="mt_16">Ed Sheeran</span>
            </div>
            <div class="r_item flex_y start mt_16">
                <img class="border50" src="./static/image/Ellipse 15.png" alt="">
                <span class="mt_16">Bob Dylan</span>
            </div>
            <div class="r_item flex_y start mt_16">
                <img class="border50" src="./static/image/Ellipse 16.png" alt="">
                <span class="mt_16">Taylor Swift</span>
            </div>
        </div>
        <div class="c_bot mt_16">
            <img src="./static/image/Snipaste_2023-11-28_16-28-58.png" alt="">
        </div>
    </div>
    <!-- 底部tab -->
    <div class="tab flex_x around algin_center">
        <div class="tab_item flex_y txt_center algin_center active">
            <img src="./static/image/headset.svg" alt="">
            <span class="mt_16">discover</span>
        </div>
        <a class="" href="./mine.html">
            <div class="tab_item flex_y txt_center algin_center">

                <img src="./static/image/Vector 2.svg" alt="">
                <span class="mt_16">my</span>

            </div>
        </a>
       <a href="./favorate.html">
        <div class="tab_item flex_y txt_center algin_center">
            <img src="./static/image/vector.svg" alt="">
            <span class="mt_16">Favorite</span>
        </div>
       </a>
    </div>
</body>

</html>